<template>
	<div class="head">
		<div class="head-top">正式班级&nbsp;&nbsp;<i class="el-icon-refresh" style="cursor: pointer;" @click="bj()"></i>
		    <span  type="primary" class='submit'  @click="showaddbj" >+ 新增正式开班</span>
			<router-link to="/educa/class">
				<div class="gd" style="float: right;">更多</div>
			</router-link>
		</div>
		<!--	<router-link to="/educa/class">-->
		<div class='bt1' v-for="v in bjList">
			<div class="bj" @click="componentsShow('edit',v,'s')" style="font-size: 14px; background:#3BBB7D ;">
				<p id="p1" style="font-size: 15px; color: white;">{{v.mc}}（{{v.lsmc}}）</p>
				<p id="p1" style="margin-bottom: 10px; color: white;">人数：{{v.xs}}（{{v.dayy}}）</p>
				<p id="p1" style="color: white;font-size:12px;text-align:center;">状态：{{v.zt}}</p>
				<div class="but">
					<router-link :to="{path:'/educa/check',query: {iid:v.id,bjmc:v.mc,frompage:'xsadd'}}">
						<div style="float: left;">考勤</div>
					</router-link>
					<router-link :to="{path:'/educa/banji',query: {iid:v.id,bjmc:v.mc}}">
					<div style="float: right;">课表</div>
					</router-link>
				</div>
			</div>
		</div>
		<!--	</router-link>-->
		<Homezsbjlist v-if="this.toggle" @close="zsbjclose"  :params="bjlxparams"></Homezsbjlist>
		<Homeykbjeditlist v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params" :data="portComponents.edit.data"></Homeykbjeditlist>
	</div>
</template>
<script type="text/javascript">
    import Homezsbjlist from '../../view/admin/zsbjManage/add'
	import Homeykbjeditlist from '../../view/educa/classManage/edit'
	export default {
		components: {
			Homezsbjlist,
			Homeykbjeditlist
		},
		data() {
			return {
				bjlxparams:{
					bjlx:'Y'
				} ,
				toggle: false,
				classtable: false,
				bjList: [],
				form: {
					id: ''
				},
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: this.$store.state.pageindex, //当前分页页码
				pagesizes: this.$store.state.pagesizes, //显示个数的选择器选项
				pagesize: this.$store.state.pagesize, //每页显示条目数
				total: 0, //总条数
				portComponents: {
					edit: {
						type: 'edit',
						toggle: false,
						params: '',
						data: ''
					}
				}
			}
		},
		created() {
			if(this.$route.query.id){
				if(this.$route.query.id != '') {
					this.componentsShow("edit",{id:this.$route.query.id});
				}
			}
			// 		Hub.$on('everefbjlit', () => { //Hub接收事件
			// 	 alert('22');
			// });
			this.bj();
		},
		methods: {
			add(){},
			zsbjclose(setting) {
				if(!setting.cancel)
					this.bj();
				this.toggle = false;
			},
			showaddbj() {
				this.toggle = true;
			},
			bj() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'bj/list', {
					params: {
						isqy: 'Y',
						keyword: '', // keyword
						yhid: logininfo.id + '',
						xxid: logininfo.xxid + '',
						pageindex: this.pageindex,
						pagesize: this.pagesize,
						btime: '',
						etime: ''
					}
				}).then(res => {
					console.log(res,989898)
					let data = res.data.data;
					let list = data.list;
					this.total = data.totalPage;
					this.bjList = list;
				}).catch(res => {
				})
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			componentsShow(type, data, idlist) {
				//显示组件
				console.log(type, data)
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						this.portComponents[i].data = idlist;
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				console.log(setting)
				this.bj();
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.bj();
						}
						return;
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.head {
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		border-top: 3px solid deepskyblue;
		float: left;
		background: white;
		margin-bottom: 10px;
	}
	.submit{
		display: inline;
		margin-left: 20px;
		color: red;
		cursor: pointer;
	}
	
	.head-top {
		width: 100%;
		text-align: left;
		font-size: 16px;
		padding: 18px 20px;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.bt1 {
		width: 250px;
		height: 120px;
		float: left;
		border-radius: 8px;
		margin-right: 11px;
		margin-top: 10px;
		margin-left: 10px;
		background: white;
		position: relative;
		display: flex;
		.but {
			width: 100%;
			/*display: flex;*/
			justify-content: space-around;
			margin-top: 18px;
			div {
				width: 60px;
				height: 28px;
				border-radius: 10px;
				background: #1EDA7F;
				line-height: 28px;
				color: white;
			}
		}
	}
	/*.bt1:hover{
		 transform:scale(1.1);
        -ms-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
	}*/
	.el-icon-refresh:hover{
		 transform:scale(1.1);
        -ms-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
	}
	.bt1 .bj {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		cursor: pointer;
		float: left;
		background: #52B058;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
		color: white;
		text-align: center;
		/*border-top: 30px solid lightgreen;;
	    border-left: 30px solid transparent;
	    border-right: 30px solid transparent;
	  	margin-right: 10px;
	  	margin-top: 10px;
	  	transform: rotate(225deg);*/
	}
	
	.bt1 p {
		text-align: center;
		font-size: 14px;
		color: black;
	}
	
	.bt1 #p1 {
		text-align: center;
		font-size: 16px;
		color: black;
		margin-top: 10px;
	}
</style>